<template>
  <view class="container">
    <!-- 主内容 -->
    <view class="content">
      <!-- 组织和积分概览 -->
      <view class="overview-card">
        <view class="overview-item">
          <text class="label">名称</text>
          <text class="value">{{ detail.orgName || '未设置' }}</text>
        </view>
        <view class="overview-item">
          <text class="label">总分配所得积分</text>
          <text class="value highlight">{{ detail.allocatedIntegral || 0 }}</text>
        </view>
      </view>
      
      <!-- 积分明细 -->
      <view class="history-section">
        <text class="section-title">分配积分明细</text>
        
        <!-- 积分明细列表 -->
        <view class="history-list">
          <!-- 循环渲染积分记录 -->
          <view class="history-item" v-for="(item, index) in list" :key="item.id">
            <view class="history-info">
              <uni-icons 
                type="plus-circle" 
                color="#34a853" 
                size="36" 
                class="history-icon"
              ></uni-icons>
              
              <view class="history-details">
                <text class="history-type">{{ item.description || '积分分配' }}</text>
                <text class="history-time">{{ formatTime(item.createTime) }}</text>
                <text class="history-status" v-if="item.status === '1'">已确认</text>
              </view>
            </view>
            
            <view class="history-amount">
              <text class="gain-amount">+{{ item.score }}</text>
              <text class="history-type-tag">{{ formatType(item.type) }}</text>
            </view>
          </view>
          
          <!-- 空状态 -->
          <view class="empty-tip" v-if="list.length === 0">
            暂无积分分配记录
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { http } from '../../../../utils/requestUtil';

// 响应式变量
const orgId = ref()
const detail = ref({}) // 组织和积分概览信息
const list = ref([]) // 积分明细列表

// 页面加载时获取数据
onLoad((options) => {
  console.log('接收的参数:', options)
  if (options.orgId) {
    orgId.value = options.orgId
    loadData() // 加载数据
  } else {
    uni.showToast({ title: '缺少参数orgId', icon: 'none' })
  }
})

// 加载页面数据
const loadData = async () => {
  try {
    // 1. 获取组织和积分概览信息
    const leaderRes = await http.get(`/integral/organization/user?userId=${uni.getStorageSync("userId")}`)
    if (leaderRes.code === 200) {
      detail.value = leaderRes.data
    }

    // 2. 获取积分明细列表
    const res = await http.get(`/bole/application/list?userId=${uni.getStorageSync("userId")}&integralSouce=1`)
    if (res.code === 200) {
      list.value = res.rows
    }
  } catch (error) {
    console.error('数据加载失败:', error)
    uni.showToast({ title: '网络异常', icon: 'none' })
  }
}

// 格式化时间（将"2025-07-06 15:49:35"转换为"2025-07-06 15:49"）
const formatTime = (timeStr) => {
  if (!timeStr) return '未知时间'
  return timeStr.substring(0, 16) // 截取到分钟
}

// 格式化类型（将type转换为中文）
const formatType = (type) => {
  const typeMap = {
    'project': '项目积分',
    'daily': '日常积分',
    'reward': '奖励积分',
    'other': '其他积分'
  }
  return typeMap[type] || type
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.content {
  padding: 30rpx;
}

/* 概览卡片 */
.overview-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.overview-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666666;
}

.value {
  font-size: 28rpx;
  color: #333333;
}

.highlight {
  color: #34a853;
  font-weight: bold;
  font-size: 32rpx;
}

/* 通用标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #eeeeee;
}

/* 积分明细区域 */
.history-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.history-list {
  margin-top: 20rpx;
}

.history-item {
  display: flex;
  flex-direction: column;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.history-item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .history-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.history-info {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.history-icon {
  margin-right: 20rpx;
}

.history-details {
  flex: 1;
}

.history-type {
  font-size: 30rpx;
  color: #333333;
  display: block;
  margin-bottom: 5rpx;
}

.history-time {
  font-size: 24rpx;
  color: #999999;
  margin-right: 15rpx;
}

.history-status {
  display: inline-block;
  background-color: #e6f4ea;
  color: #34a853;
  font-size: 22rpx;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
}

.history-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.gain-amount {
  font-size: 32rpx;
  color: #34a853;
  font-weight: bold;
}

.history-type-tag {
  font-size: 24rpx;
  color: #666666;
  margin-top: 5rpx;
  background-color: #f6f6f6;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}

/* 空状态 */
.empty-tip {
  text-align: center;
  padding: 80rpx 0;
  color: #999999;
  font-size: 28rpx;
}
</style>